import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Platform,
  Image,
  Dimensions,
} from '@hippy/react';

import { ToastModule } from '../module/ToastMsg';

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#4377dd",
  },
  bgHeader: {
    height: 44,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  navTitle: {
    fontSize: 22,
    fontWeight: 'bold',
    color: 'white',
  },
  bg: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
  },
  localBtn: {
    marginTop: 60,
    width: 260,
    height: 49,
    borderWidth: 1,
    borderColor: 'gray',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  localBgView: {
    marginTop: 10,
    width: 280,
    height: 180,
    borderColor: 'blue',
    borderWidth: 1,
    padding: 4,
    justifyContent: 'center',
    alignItems: 'center',
  },
  remoteBtn: {
    marginTop: 30,
    width: 260,
    height: 49,
    borderWidth: 1,
    borderColor: 'gray',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  remoteBgView: {
    marginTop: 10,
    width: 280,
    height: 180,
    borderColor: 'red',
    borderWidth: 1,
    padding: 4,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnNormalText: {
    fontSize: 16,
  },
  btnBlueText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'blue',
  },
});

export default class HuodongPage extends Component {
  constructor(props) {
    super(props);


    this.state = {
      AsyncComponentFromLocal: null,
      AsyncComponentFromHttp: null,
    };
  }

  _localDidTapped = () => {

    import(/* webpackMode: "lazy", webpackChunkName: "asyncComponentFromLocal" */'../externals/DyanmicImport/AsyncComponentLocal')
    .then((component) => {
      this.setState({
        AsyncComponentFromLocal: component.default || component,
      });
    })
    .catch(err => console.error('import async local component error', err));
  }

  _remoteDidTapped = () => {
    if (process.env.NODE_ENV === 'development') {
      ToastModule.toast("远程dev")
      import(/* webpackMode: "lazy", webpackChunkName: "asyncComponentFromHttp" */'../externals/DyanmicImport/AsyncComponentHttp')
        .then((component) => {
          this.setState({
            AsyncComponentFromHttp: component.default || component,
          });
        })
        .catch(err => console.error('import async remote component error', err));
    } else {
      ToastModule.toast("远程gitee")
      import(/* webpackMode: "lazy",customChunkPath: "https://gitee.com/liluoyuwp/liluoyu/raw/master/reactcode/", webpackChunkName: "asyncComponentFromHttp" */'../externals/DyanmicImport/AsyncComponentHttp')
        .then((component) => {
          this.setState({
            AsyncComponentFromHttp: component.default || component,
          });
        })
        .catch(err => console.error('import async remote component error', err));
    }
  }

  render() {

    const { AsyncComponentFromLocal, AsyncComponentFromHttp } = this.state;

    return (
      <View style={{flex: 1}}>
        <View style={[styles.container, { height: Dimensions.get('screen').statusBarHeight + 44}]}>
          <View
            style={{ height: Dimensions.get('screen').statusBarHeight }}
          />
          <View style={styles.bgHeader}>
            <Text style={styles.navTitle}>我的</Text>
          </View>
        </View>
        <View style={styles.bg}>
          <View style={styles.localBtn} onClick={this._localDidTapped}>
            <Text style={styles.btnNormalText}>点击动态加载</Text>
            <Text style={styles.btnBlueText}>本地</Text>
            <Text style={styles.btnNormalText}>分包</Text>
          </View>
          <View style={styles.localBgView}>
            {AsyncComponentFromLocal ? <AsyncComponentFromLocal /> : null}
          </View>
          <View style={styles.remoteBtn} onClick={this._remoteDidTapped}>
            <Text style={styles.btnNormalText}>点击动态加载</Text>
            <Text style={[styles.btnBlueText, {color: 'red'}]}>远程</Text>
            <Text style={styles.btnNormalText}>分包</Text>
          </View>
          <View style={styles.remoteBgView}>
            {AsyncComponentFromHttp ? <AsyncComponentFromHttp /> : null}
          </View>
        </View>
      </View>
    );
  }
}
